<template>
    <div class="add-details">
        <div class="flex col-stretch">
            <el-form-item
                label="商品详情"
                class="form-edit"
            >
                <editor v-model="value.content" />
            </el-form-item>
            <div class="preview m-l-30 flex-none">
                <div class="title flex row-center">详情预览</div>
                <el-scrollbar class="ls-scrollbar" style="height: 600px">
                    <div
                        class="p-l-10 p-r-10"
                        v-html="value.content"
                    ></div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Editor from '@/components/editor.vue'
@Component({
    components: {
        Editor,
    },
})
export default class AddDetails extends Vue {
    @Prop() value: any
 
}
</script>

<style scoped lang="scss">
.add-details {
    padding-bottom: 40px;
    .form-edit {
        margin-bottom: 0;
    }
    .preview {
        width: 370px;
        box-sizing: border-box;
        flex: none;
        border: 1px solid $--border-color-base;
        /deep/ img {
            max-width: 100%;
            display: block;
        }
        .title {
            background: #f5f8ff;
            height: 40px;
            border-bottom: 1px solid $--border-color-base;
        }
    }
}
</style>


